<template>
  <div class="home-view">
    <el-card class="content-feed">
      <template #header>
        <h2>{{this.$route.params.name}}</h2>
      </template>
      <div class="content-list">
        <ContentCard
            v-for="item in contents"
            :key="item.contentId"
            :content="{
            id: item.contentId,
            title: item.title,
            summary: item.summary,
            author: item.username,
            publishTime: formatDate(item.publishTime),
            likeCount: item.likeCount,
            commentCount: item.commentCount,
            isLiked: item.isLiked || false,
            categoryName: item.categoryName,
            readCount: item.readCount
          }"
            @like="handleLike"
            @click="handleCardClick(item.contentId)"
            style="cursor: pointer;"
        />
      </div>

      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
          class="pagination"
      />
    </el-card>
  </div>
</template>
<script>

import axios from '@/utils/request';
import ContentCard from '@/components/ContentCard.vue'
export default {
  components: {
    ContentCard 
  },
  data() {
    return {
      contents: [],
      currentPage:1,
      pageSize:3,
      total: 0,
    };
  },
  mounted() {
    this.fetchContents();
  },
methods: {
  fetchContents() {
      axios.get(`/contents/page/${this.$route.params.id}`,{
      params: {
        current: this.currentPage,
        size: this.pageSize
      }
      }).then(response =>{
        if (response.data.code === 200) {
          this.contents = response.data.data.records;
          this.total = response.data.data.total
        } else {
          this.$message.error('获取内容失败');
        }
      })
  },
  handlePageChange(page){
    this.currentPage = page
    this.fetchContents();
  },


  formatDate(dateString) {
    const date = new Date(dateString);
    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
  },
  // 处理卡片点击事件
  handleCardClick (contentId){
    console.log("点击了卡片：", contentId);
    // 方法一：使用命名路由跳转（推荐方式）
    // router.push({
    //   name: 'ContentDetail', // 目标页面的路由名称
    //   params: { id: contentId } // 传递ID参数
    // });
    // 或者方法二：使用路径跳转
    this.$router.push(`/content/${contentId}`);
  },
  // 处理点赞
handleLike(contentId){
  try {
    const content = contents.value.find(c => c.contentId === contentId)
    if (content) {
      // 这里应该调用点赞API
      // await likeContent(contentId)

      // 模拟点赞成功后的状态更新
      content.likeCount += content.isLiked ? -1 : 1
      content.isLiked = !content.isLiked
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
  }
  }

  },
  watch: {
    parentId() {
      this.pagination.pageNum = 1;
      this.fetchContents();
    }
  }
};
</script>

<style scoped>
.content-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.content-info .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}
.home-view {
  flex: 1;
}
.content-info .summary {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.content-meta {
  width: 220px;
  text-align: right;
}

.category-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.stats {
  font-size: 13px;
  color: #999;
  margin-bottom: 8px;
}

.stats span {
  margin-left: 12px;
}

.favorite-btn {
  margin-left: 12px;
  color: #f56c6c;
}

.publish-date {
  font-size: 13px;
  color: #999;
}

.pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>
